<template>
    <nav>
        <ul>
            <li v-for = "(val,index) of data" :key="index">
                <span  @click="handerClick(val,index)">
                    <i></i>
                    <span>{{val.name}}</span>
                    <i></i>
                </span>
                <k-nav :data="val.children" v-if='val.showChildren'></k-nav>
            </li>
        </ul>
        
    </nav>
</template>

<script>
    export default {
        name:'KNav',
        props:{
            data:{
                type:Array,
                default:null
            }
        },
        data () {
            return {}
        },
        computed:{},
        methods:{
            handerClick (val,index) {
                this.data[index].showChildren = !this.data[index].showChildren
                this.$emit("click",{data:val,index:index})
            }
        }
    }

</script>